<div class="row">
  <div class="col-md-10 col-md-offset-1">
    <div class="side-padding-5">
      <header class="hero flex-container flex-space-btw">
        <h1 class="hero-title">Your Stories</h1>
        <div class="button-set">
          <%= link_to "Write a story", new_post_path, class: "button green-border-button" %>
        </div>
      </header>

      <nav class="nav-tabs">
        <ul>
          <li><%= nav_link_to "Drafts", stories_drafts_path %></li>
          <li><%= nav_link_to "Public", stories_published_path %></li>
        </ul>
      </nav>

      <div data-animation="fadeInUp-fadeOutDown">
        <% if @posts.any? %>
          <% @posts.each do |post| %>
            <div class="story-card" id="story_<%= post.id %>">
              <strong class="sc-title"><%= link_to post.title, edit_post_path(post) %></strong>
              <small class="sc-metadata">Published <%= time_ago_in_words(post.published_at) %> ago &#149; <%= post_length_in_minutes(post.body) %>
                <div class="btn-group">
                  <button type="button" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="glyphicon glyphicon-chevron-down"></span>
                  </button>
                  <ul class="dropdown-menu">
                    <li><%= link_to "Edit", edit_post_path(post) %></li>
                    <li><%= link_to "Delete", api_post_path(post), method: :delete, remote: true %></li>
                  </ul>
                </div>
              </small>
            </div>
          <% end %>
        <% else %>
          <p class="no-sc-message">No published posts yet</p>
        <% end %>
      </div>
    </div>
  </div>
</div>
